<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<link type="text/css" rel="stylesheet" href="themes/humanity/skin.css" />
</h:head>

<ui:composition template="/WEB-INF/templates/MenuTemplate.xhtml">
	<ui:define name="content">

		<h:form>
			<p:messages autoUpdate="true" />
			<p:dataTable value="#{autoCompleteBean.listaGastos}" var="p"
				border="1" editable="true" lazy="true"
				emptyMessage="No hay gastos reportados." label="Tabla"
				paginator="true" rows="10"
				paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
				rowsPerPageTemplate="10,40,80" id="gastos">
				<f:facet name="header">  
            		Ajax Sorting  
       			 </f:facet>

				<p:column sortBy="nombre" filterBy="nombre" filterMatchMode="contains"
					headerText="Tipo_Gasto" label="Tipo Gasto">
					<h:outputText value="#{p.nombre}" />
				</p:column>

				<p:column sortBy="fecha" headerText="Fecha" label="Fecha">
					<f:facet name="header">
						<h:outputText value="Fecha" />
					</f:facet>
					<h:outputText value="#{p.fecha}" />
				</p:column>

				<p:column sortBy="#{p.monto}" headerText="Monto" label="Monto">
					<f:facet name="header">
						<h:outputText value="Monto" />
					</f:facet>
					<h:outputText value="#{p.monto}" />
				</p:column>

				<p:column sortBy="#{p.perioricidad}" headerText="Perioricidad"
					label="Perioricidad">
					<f:facet name="header">
						<h:outputText value="Perioricidad" />
					</f:facet>
					<h:outputText value="#{p.perioricidad}" />
				</p:column>
			</p:dataTable>
		</h:form>
	</ui:define>
</ui:composition>
</html>